<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表页</title>
    <link rel="stylesheet" href="./dist/css/list.css" th:href="@{/dist/css/list.css}">
    <link rel="stylesheet" href="./dist/css/reset.css" th:href="@{/dist/css/reset.css}">
    <link rel="stylesheet" href="./font/iconfont.css" th:href="@{/dist/font/iconfont.css}">
    <link rel="stylesheet" href="./font/iconfont.css" th:href="@{/dist/font/iconfont.css}">
    <link rel="stylesheet" href="./font/iconfont.css" th:href="@{/webjars/bootstrap/3.3.0/css/bootstrap.css}">


    <script src="../js/jquery-1.11.0.js" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
    <script src="../js/jquery-1.11.0.js" th:src="@{/webjars/bootstrap/3.3.0/js/bootstrap.js}"></script>

    <script src="../js/list.js" th:src="@{/dist/js/list.js}"></script>
</head>
<body>
    <div class="menu">
        <div class="menu-cen">
            <span class="iconfont icon-index"></span>
            <a href="index.html">天猫首页</a>
            <p>喵，欢迎来天猫国际</p>
            <i id="tui"><a href="login.html" id="ming">请登录</a></i>
            <ul class="menu-you">
                <li class="yi"><a>我的淘宝</a>
                    <div>
                        <a href="">已买到的宝贝</a>
                        <a href="">已卖出的宝贝</a>
                    </div>
                </li>
                <li>
                    <span class="iconfont icon-gouwuche"><a href="cart.html">购物车</a></span>
                </li>
                <li class="yi"><a href="">收藏夹</a>
                    <div>
                        <a href="">收藏的宝贝</a><br>
                        <a href="">收藏的店铺</a>
                    </div>
                </li>
                <li class="san">
                    <span class="iconfont icon-icon1460357101473"><a href="">手机版</a></span>
                    <div>
                        <img src="../img/soujima.png" alt="">
                    </div>
                </li>
                <li><a href="">淘宝网</a></li>
                <li class="er"><a>商家支持</a>
                    <div>
                        <ul>
                            <li>
                                <h3>商家：</h3>
                                <a href="">商家中心</a>
                                <a href="">天猫规则</a>
                                <a href="">商家入驻</a>
                                <a href="">运营服务</a>
                                <a href="">商家工具</a>
                                <a href="">商家规则</a>
                                <a href="">天猫智库</a>
                                <a href="">喵言喵语</a>
                            </li>
                            <li>
                                <h3>帮助：</h3>
                                <a href="">帮助中心</a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="sou">
        <img src="../img/logo.png" alt="" class="yi">
        <form action="/tmall/seek" method="get">
            <input type="text" name="seekName" class="sou-kuang" placeholder="  搜索 天猫 商品/品牌/店铺">
            <input type="submit" value="搜索" class="sou-btn">
        </form>
        <ul>
            <li><a href="">面膜补水保湿女</a></li>
            <li><a href="">乳液保湿补水女</a></li>
            <li><a href="">补水保湿喷雾</a></li>
            <li><a href="">补水保湿男</a></li>
        </ul>
    </div>

    <div class="pg">
        <div class="pg-p">
            <p>品牌</p>
            <div class="pm">
                <ul>
                    <li><a href="">Olay/玉兰油</a></li>
                    <li><a href="">Curel/珂润</a></li>
                    <li><a href="">A.H.C/爱和纯</a></li>
                    <li><a href="">Dr.Ci:Labo</a></li>
                    <li><a href="">DERMAFIRM+/德妃</a></li>
                    <li><a href="">Laneige/兰芝</a></li>
                    <li><a href="">SK-II</a></li>
                    <li><a href="">Shiseido/资生堂</a></li>
                    <li><a href="">Dr.Jart+/蒂佳婷</a></li>
                    <li><a href="">L'OREAL /欧莱雅</a></li>
                    <li><a href="">NATIO</a></li>
                    <li><a href="">SULWHASOO/雪花秀</a></li>
                    <li><a href="">The history of whoo/后</a></li>
                    <li><a href="">Avene/雅漾</a></li>
                </ul>
            </div>

            <div class="xuan">
                <i>+ 多选</i>
                更多<span class="iconfont icon-down"></span>
            </div>
        </div>
        <div class="pg-g">
            <p>功效</p>
            <div class="gg">
                <ul>
                    <li><a href="">Olay/玉兰油</a></li>
                    <li><a href="">Curel/珂润</a></li>
                    <li><a href="">A.H.C/爱和纯</a></li>
                    <li><a href="">Dr.Ci:Labo</a></li>
                </ul>
            </div>

        </div>
    </div>
<!-- ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！   -->
    <div class="sp" id="sp">

        <div class="sp-p" th:each="product:${pageInfo.getList()}">
            <a th:href="@{/tmall/deta(id = ${product.getId()})}" class="tiao" th:each="imge:${imgs}"><img src="../img/zst.jpg" th:if="${product.getId() == imge.getProductId()}" th:src="@{ ${imge.getUrl()} }" alt=""> </a>
            <p class="qi"  th:text="${ '￥ ' + product.getOriginalPrice()}"><i>￥</i>102</p>
            <p class="ming"><a href="" th:text="${product.getName()}">资生堂Fino浸透美容液2瓶装</a></p>
            <a href="" th:text="${product.getSeller()}">天猫国际进口超市</a><br>
            <span>总成交 <em th:text="${product.getSaleCount() + '笔'}">5238笔</em></span>
        </div>

    </div>
    <div class="ye">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li th:class="${pageInfo.isIsFirstPage() ? 'disabled' : ''}">
                    <a th:href="@{/tmall/seek(seekName=${seekName},page=${pageInfo.getPrePage()})}" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li th:each="pro,index:${#numbers.sequence((pageInfo.getPages() >=5 ? pageInfo.getPageNum() : 1),(pageInfo.getPages() >= 5 ? 5 : pageInfo.getPages()))}"  th:class="${index.count == pageInfo.getPageNum() ? 'active' : ''}"><a th:href="@{/tmall/seek(seekName=${seekName},page=${pro})}" th:text="${pro}">1</a></li>
                <li th:class="${pageInfo.isIsLastPage() ? 'disabled' : ''}">
                    <a th:href="@{/tmall/seek(seekName=${seekName},page=${pageInfo.getNextPage()})}" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>

<!-- 底部 -->
    <div class="di-wrap">
        <div class="di">
            <div class="di-s">
                <div class="yi">
                    <img src="../img/tian.png" alt="">
                    <p>工作时间：09:00 - 24:00 (周一到周日)</p>
                    <span class="iconfont icon-kefu">  买家在线咨询</span><br>
                    <span class="iconfont icon-duihua">  问题反馈</span>
                </div>
                <div class="er">
                    <img src="../img/er.png" alt="">
                    <p>扫一扫，品质在手</p>
                </div>
                <div class="san">
                    <ul>
                        <li>
                            <h3>服务保障</h3>
                            <a href="">正品保障</a><br>
                            <a href="">正品保障</a><br>
                            <a href="">正品保障</a><br>
                            <a href="">正品保障</a><br>
                            <a href="">正品保障</a><br>
                        </li>
                        <li>
                            <h3>消费者指南</h3>
                            <a href="">新手入门</a><br>
                            <a href="">新手入门</a><br>
                            <a href="">新手入门</a><br>
                            <a href="">新手入门</a><br>
                            <a href="">新手入门</a><br>
                        </li>
                        <li>
                            <h3>支付方式</h3>
                            <a href="">新手入门</a><br>
                            <a href="">新手入门</a><br>
                            <a href="">支付宝快捷支付</a><br>
                            <a href="">新手入门</a><br>
                            <a href="">新手入门</a><br>
                            <a href="">天猫国际交易汇率</a><br>
                        </li>
                        <li>
                            <h3>商家支持</h3>
                            <a href="">新手入门</a><br>
                            <a href="">新手入门</a><br>
                            <a href="">支付宝快捷支付</a><br>
                            <a href="">新手入门</a><br>
                            <a href="">新手入门</a><br>
                            <a href="">新手入门</a><br>
                            <a href="">新手入门</a><br>
                            <a href="">新手入门</a><br>
                            <a href="">新手入门</a><br>
                        </li>
                    </ul>
                </div>
                
            </div>
            <div class="di-x">
                <a href="">阿里巴巴集团 </a>
                <a href="">淘宝网  </a>
                <a href="">天猫  </a>
                <a href="">聚划算  </a>
                <a href="">全球速卖通   </a>
                <a href="">阿里巴巴国际交易市场   </a>
                <a href="">1688   </a>
                <a href="">阿里妈妈   </a>
                <a href="">去啊   </a>
                <a href="">阿里云计算 </a>
                <a href="">AliOS  </a>
                <a href="">阿里通信  </a>
                <a href="">万网  </a>
                <a href="">高德 </a>
                <a href="">优视  </a>
                <a href="">友盟 </a>
                <a href="">酷盘 </a>
                <a href="">虾米  </a>
                <a href="">天天动听 </a>
                <a href="">来往  </a>
                <a href="">支付宝 </a>
                <a href="">钉钉 </a>
                <p>© 2013-现在 Taobao China Holding Limited. 版权所有
                    <a href="">隐私权政策</a>
                    <a href="">用户服务协议</a>
                    <a href="">条款规定</a>
                </p>
            </div>
        </div>
    </div>
    
    <!-- 侧边 -->
    <div class="cb" id="cb">
        <ul class="yi">
            <li>
                <span class="iconfont icon-meizhuanggehu"></span>
                <i>美容护肤</i>
            </li>
            <li>
                <span class="iconfont icon-meizhuanggehu1"></span>
                <i>美容护肤</i>
            </li>
            <li>
                <span class="iconfont icon-meizhuanggehu"></span>
                <i>美容护肤</i>
            </li>
            <li>
                <span class="iconfont icon-meishi"></span>
                <i>美容护肤</i>
            </li>
            <li>
                <span class="iconfont icon-shipinbaojianpinxe6be"></span>
                <i>美容护肤</i>
            </li>
            <li>
                <span class="iconfont icon-qunzi"></span>
                <i>美容护肤</i>
            </li>
            <li>
                <span class="iconfont icon-icon1460357101473"></span>
                <i>美容护肤</i>
            </li>
        </ul>
        <ul class="er"> 
            <li>
                <span class="iconfont icon-xiangshangjiantou"></span>
                <i id="ding">回到顶部</i>
            </li>
            <li>
                <span class="iconfont icon-duihua"></span>
                <i>意见反馈</i>
            </li>
            <li>
                <span class="iconfont icon-start"></span>
                <i>收藏本页</i>
            </li>
            <li>
                <span class="iconfont icon-kefu"></span>
                <i>在线客服</i>
            </li>
        </ul>
    </div>
</body>
</html>